<template>
  <div class="app-container home">
    <el-row :gutter="24">
      <el-col :sm="24">
        <h2>考生信息导入-excel</h2>
        <el-steps :active="active" finish-status="success">
          <el-step title="考生报名信息"></el-step>
          <el-step title="考生游泳成绩"></el-step>
          <el-step title="考生照片信息"></el-step>
          <el-step title="考生信息核对"></el-step>
          <el-step title="导入完成"></el-step>
        </el-steps>
      </el-col>
      <el-col :sm="24" style="text-align: center; color: #c01117">
        <br>
        {{ resultMsg }}
        <br>
      </el-col>
      <el-col :sm="24" align="middle" v-loading="loading">
        <div :style="divStyle">模版下载:<a :href="excelUrl" style="color: #00afff; cursor: pointer">{{ excelName }}</a>
          <br/>
          <div>
            <table border="1" cellpadding="1" cellspacing="1" id="ksxxTable">
              <tr>
                <td colspan="19" style="text-align: center">字段说明</td>
              </tr>
              <tr>
                <td>ZKH</td>
                <td>JDH</td>
                <td>XM</td>
                <td>XB</td>
                <td>ZXDM</td>
                <td>ZXMC</td>
                <td>BJDM</td>
                <td>BCTYXM</td>
                <td>BCJSZT</td>
                <td>XCTYXM1</td>
                <td>XCJSZT1</td>
                <td>XCTYXM2</td>
                <td>XCJSZT2</td>
                <td>ZP</td>
                <td>LXDH</td>
                <td>SFZH</td>
                <td>PSCJ</td>
                <td>MSZT</td>
                <td>QY</td>
              </tr>
              <tr>
                <td>准考号</td>
                <td>建档号</td>
                <td>姓名</td>
                <td>性别 1男 2女</td>
                <td>中学代码</td>
                <td>中学名称</td>
                <td>班级代码</td>
                <td>必测体育项目</td>
                <td>必测减试状态0否1是</td>
                <td>选测体育项目1</td>
                <td>选测减试状态0否1是</td>
                <td>选测体育项目2</td>
                <td>选测减试状态0否1是</td>
                <td>照片路径</td>
                <td>联系电话</td>
                <td>身份证号</td>
                <td>平时成绩</td>
                <td>免试状态0：否1：9分免考 2：15分免考</td>
                <td>区域代码</td>
              </tr>
              <tr>
                <td colspan="19">
                  1、三项考试中存在一项减试，考生状态为减试；2免试状态为1时，考生减试状态字段不做状态控制；3需要提前维护好中学考试编排信息
                </td>
              </tr>
            </table>
            <table border="1" cellpadding="1" cellspacing="1" id="ksyyTable" style="display: none">
              <tr>
                <td colspan="5" style="text-align: center">字段说明</td>
              </tr>
              <tr>
                <td>ZKH</td>
                <td>XM</td>
                <td>YYCJ</td>
                <td>DJ</td>
                <td>CJSX</td>
              </tr>
              <tr>
                <td>准考号</td>
                <td>姓名</td>
                <td>游泳成绩</td>
                <td>得分</td>
                <td>成绩是否有效，默认是</td>
              </tr>
            </table>
          </div>
        </div>
        <el-upload id="importUpload"
                   class="upload-demo"
                   drag
                   :show-file-list=false
                   :on-success="importDbfSuccess"
                   :on-error="importDbfError"
                   :accept="importAccept"
                   :on-progress="importProgress"
                   :action="url"
                   :headers="headers">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">{{ upload__text }}</div>
          <div class="el-upload__tip" slot="tip">{{ upload__tip }}</div>
        </el-upload>
        <el-button style="margin-top: 12px;" @click="previous" v-if="active != 0 && active != 6">上一步</el-button>
        <el-button style="margin-top: 12px;" @click="next" v-if="active != 6">下一步</el-button>
        <el-button style="margin-top: 12px;" @click="again" v-if="active == 6">重新导入</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  uploadStatus, checkInfo, checkInfoProgress
} from '@/api/business/import/candidateImport'

export default {
  computed: {
    headers() {
      let reg = RegExp('Token' + '=([^;]+)')
      let arr = document.cookie.match(reg)
      return {
        Authorization: arr[1]
      };
    },
    getCookie(name) {
      let reg = RegExp(name + '=([^;]+)')
      let arr = document.cookie.match(reg)
      if (arr) {
        return arr[1]
      } else {
        return ''
      }
    },
  },
  name: 'candidateImport',
  data() {
    return {
      // 遮罩层
      loading: false,
      active: 0,
      url: '/' + this.$store.state.settings.prefix + '/business/candidates/importExcel',
      upload__text: '点击这里或拖放学生信息EXCEL文件到这里上传',
      upload__tip: '仅支持.xls文件',
      resultMsg: '',
      importAccept: '.xls',
      divStyle: 'display:block',
      excelUrl: require('../../../assets/excel/ksbmxx_pro.xls'),
      excelName: '考生报名信息'
    }
  },
  methods: {
    previous() {
      this.active--
      this.changeActive()
    },
    next() {
      this.active++
      this.changeActive()
      if (this.active === 4) {
        this.active = this.active + 2
      }
    },
    again() {
      this.active = 0
      this.changeActive()
    },
    importProgress() {
      this.loading = true
    },
    //文件上传异常结果
    importDbfError(err, file, fileList) {
      this.loading = false
      this.resultMsg = '文件导入失败，失败原因：' + err.msg
    },
    //文件上传成功结果
    importDbfSuccess(response, file, fileList) {
      this.loading = false
      if (response.status != 'success') {
        if (response.message) {
          this.resultMsg = '文件导入失败,返回原因：' + response.message
          return
        } else {
          this.resultMsg = '文件导入失败,返回原因：' + response.msg
          return
        }
      }
      uploadStatus().then(response => {
        if (response.status == 'success') {
          this.resultMsg = response.data.message
        }
      })
    },
    changeActive() {
      document.getElementById('ksxxTable').style.display = 'none'
      document.getElementById('ksyyTable').style.display = 'none'
      this.divStyle = 'display:none'
      this.excelUrl = ''
      this.excelName = ''
      if (this.active === 0) {
        this.url = '/' + this.$store.state.settings.prefix + '/business/candidates/importExcel'
        this.upload__text = '点击这里或拖放学生信息EXCEL文件到这里上传'
        this.upload__tip = '仅支持.xls文件'
        this.importAccept = '.xls'
        document.getElementById('ksxxTable').style.display = 'block'
        document.getElementById('importUpload').style.display = 'block'
        this.divStyle = 'display:block'
        this.excelUrl = require('../../../assets/excel/ksbmxx.xls')
        this.excelName = '考生报名信息'
      }
      if (this.active === 1) {
        this.url = '/' + this.$store.state.settings.prefix + '/business/candidates/importSwimResultsExcel'
        this.upload__text = '点击这里或拖放学生游泳成绩EXCEL文件到这里上传'
        this.upload__tip = '仅支持.xls文件'
        this.importAccept = '.xls'
        this.divStyle = 'display:block'
        this.excelUrl = require('../../../assets/excel/ksyycj.xls')
        this.excelName = '考生游泳成绩'
        document.getElementById('ksyyTable').style.display = 'block'
      }
      if (this.active === 2) {
        this.url = '/' + this.$store.state.settings.prefix + '/business/candidates/importZip'
        this.upload__text = '点击这里或拖放学生照片zip文件到这里上传'
        this.upload__tip = '仅支持.zip文件'
        this.importAccept = '.zip'
      }
      if (this.active === 3) {
        document.getElementById('importUpload').style.display = 'none'

        checkInfo().then(response => {
        })
        checkInfoProgress().then(response => {
          if (response.status != 'success') {
            this.resultMsg = response.message
          } else {
            this.resultMsg = '导入完成'
          }
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
